import React from 'react';
import { InputItem } from 'antd-mobile';
import FormItem from './FormItem';
import CellPhone from '../CellPhone';
import styles from './index.less';

/**
 * 简历表单
 * @param {form,arrayEmail} props
 */
const ResumeForm = props => {
    const { form, cellphone = '+86', name = '' } = props;

    const { getFieldDecorator, setFieldsValue } = form; // 表单内容

    // 设置电话区域
    const setPhoneAreaCode = phoneAreaCode => {
        // 移除加号
        const code = phoneAreaCode.substring(1);

        setFieldsValue({ phoneAreaCode: code });
    };
    // 设置电话号码
    const setPhone = phone => {
        setFieldsValue({ phone });
    };

    return (
        <div className={styles.resumeContainer}>
            <div className={styles.resumeList}>
                <FormItem label="姓名" itemId="name" form={form}>
                    {/* <InputItem {...getFieldProps('userName')} placeholder={'姓名'} /> */}
                    {getFieldDecorator('name', {
                        validate: [
                            {
                                trigger: 'onChange',
                                rules: [
                                    {
                                        required: false
                                    },
                                    {
                                        validator(rule, value, callback) {
                                            callback();
                                        }
                                    }
                                ]
                            },
                            // {
                            //     trigger: 'onFocus',
                            //     rules: [
                            //         {
                            //             validator(rule, value, callback) {
                            //                 callback();
                            //             }
                            //         }
                            //     ]
                            // },
                            {
                                trigger: 'onBlur',
                                rules: [
                                    {
                                        required: false,
                                        message: '请输入姓名'
                                    },
                                    {
                                        max: 50,
                                        message: '最多能输入50个字符'
                                    }
                                ]
                            }
                        ],
                        initialValue: name
                    })(<InputItem placeholder="姓名" className={styles.inputI} clear />)}
                </FormItem>
                <FormItem itemId="cellPhone" form={form}>
                    {/* <InputItem {...getFieldProps('userName')} placeholder={'姓名'} /> */}
                    {getFieldDecorator('cellPhone', {
                        validate: [
                            {
                                trigger: 'onChange',
                                rules: [
                                    {
                                        required: false
                                    },
                                    {
                                        validator(rule, value, callback) {
                                            callback();
                                        }
                                    }
                                ]
                            },

                            {
                                trigger: 'onBlur',
                                rules: [
                                    {
                                        required: false,
                                        message: '请输入手机号'
                                    },

                                    {
                                        validator(rule, value, callback) {
                                            // eslint-disable-next-line no-useless-escape
                                            if (value === '') {
                                                callback();
                                                return;
                                            }
                                            if (value.length === 3) {
                                                callback();
                                                return;
                                            }
                                            if (
                                                // eslint-disable-next-line no-useless-escape
                                                /^(\+?0?86\-?)?1[345789]\d{9}$/.test(value) === false &&
                                                /\+65\d{8}/.test(value) === false
                                            ) {
                                                callback(new Error('手机号格式错误'));
                                            } else {
                                                callback();
                                            }
                                        }
                                    }
                                ]
                            }
                        ],
                        initialValue: cellphone
                        // trigger: 'onBlur'
                    })(
                        <CellPhone
                            placeholder="手机号码"
                            setPhoneAreaCode={setPhoneAreaCode}
                            setPhone={setPhone}
                            maxLength={11}
                        />
                    )}
                </FormItem>

                {getFieldDecorator('phoneAreaCode', {
                    initialValue: ''
                })(<span></span>)}
                {getFieldDecorator('phone', {
                    initialValue: ''
                })(<span></span>)}
            </div>
        </div>
    );
};

export default ResumeForm;
